<template>
  <div>
    <div class="student-management">
      <div class="left-section">
        <el-card class="info-card">
          <div slot="header" style="margin-bottom: 30px">
            个人信息
          </div>
          <el-form :model="userInfo" label-width="100px" ref="userForm" :disabled="!isEdit">
            <el-form-item label="用户ID">
              <el-input v-model="userInfo.uid" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="userInfo.uname" :disabled="!isEdit"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="userInfo.email" :disabled="!isEdit"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="userInfo.mobile" :disabled="!isEdit"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-input v-model="userInfo.create_time" disabled></el-input>
            </el-form-item>
            <el-form-item label="更新时间">
              <el-input v-model="userInfo.update_time" disabled></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="isEdit = !isEdit" style="float: right; margin-right: 400px; margin-bottom: 60px">
            {{ isEdit ? '取消' : '开始修改' }}
          </el-button>
          <el-button type="primary" @click="updateUserInformation" :disabled="!isEdit || !isFormValid" v-if="isEdit"
                     style="float: right; margin-right: 30%">
            确认修改
          </el-button>
        </el-card>
      </div>
      <div class="right-section">
        <el-card class="password-card">
          <div slot="header" style="margin-bottom: 30px">
            修改密码
          </div>
          <el-form :model="passwordForm" label-width="100px" ref="passwordForm">
            <el-form-item label="新密码" prop="password">
              <el-input type="password" v-model="passwordForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
              <el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="changePassword" :disabled="!isPasswordValid">确认修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import {ElMessage} from "element-plus";
import axiosService from "@/service/UserAPI.js";
import store from "@/store/Store.js";

export default {
  data() {
    return {
      isEdit      : false,
      userInfo    : {
        uid        : null,
        uname      : '',
        pswd       : '',
        email      : '',
        mobile     : '',
        create_time: '',
        update_time: ''
      },
      passwordForm: {
        password       : '',
        confirmPassword: '',
      },
    };
  },
  computed: {
    ...mapState(['CurrentUser']), // 从 Vuex 中获取 CurrentUser
    isFormValid() {
      return this.userInfo.uname !== '' && this.userInfo.email !== '' && this.userInfo.mobile !== '';
    },
    isPasswordValid() {
      return this.passwordForm.password !== '' && this.passwordForm.confirmPassword !== '';
    },
  },
  methods : {
    updateUserInformation() {
      this.isEdit = !this.isEdit;
      this.updateUserInfo();
    },
    updateUserInfo() {
      // 调用更新用户信息的 API
      axiosService.updateUser(this.userInfo.uid,this.userInfo) // 假设您有一个 updateUser API
          .then(() => {
            ElMessage.success('修改成功');
            store.commit('setCurrentUser', this.userInfo)
          })
          .catch(error => {
            console.error('Error updating user information:', error);
            ElMessage.error('更新失败');
          });
    },
    changePassword() {
      if (this.passwordForm.password !== this.passwordForm.confirmPassword) {
        ElMessage.error("两次密码输入不匹配");
      } else {
        this.userInfo.pswd = this.passwordForm.password;
        this.updateUserInfo();
        this.passwordForm = {
          password       : '',
          confirmPassword: '',
        };
        ElMessage.success("密码修改成功");
      }
    },
  },
  mounted() {
    this.userInfo = this.CurrentUser || {
      uid        : null,
      uname      : '',
      pswd       : '',
      email      : '',
      mobile     : '',
      create_time: '',
      update_time: ''
    };
  },
};
</script>

<style scoped>
.el-card{
  text-align: center;
  margin-left: 300px;
  max-width: 900px;
}
.student-management {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.left-section, .right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
